<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/WEB-INF/templates/loginPageLayout.xhtml">

	<ui:define name="title">
		<h:outputText value="DAMATE - #{msg['RegistrationPage.title']}" />
	</ui:define>

    <ui:define name="login">
        <script type="text/javascript">
            $("img.logo").css("top", "-110px");
        </script>
        <div id="registrationPanel">
            <h:form id="id-registration-form">
                <div class="wrapper">
                    <div class="header">
                        <h:outputText value="#{msg['RegistrationPage.title']}" />
                    </div>
                    <h:panelGrid columns="2" styleClass="registration-fields" columnClasses="labelColumn,inputColumn">
                        <h:outputLabel value="#{msg['RegistrationPage.inputFields.firstname']}" />
                        <h:panelGroup>
                            <h:inputText id="id-firstname" value="#{registrationManager.newUser.firstname}" maxlength="45" required="true"
                                         requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                         validatorMessage="#{msg['userManagement.inputFields.validationMessages.name.length']}">
                                <f:validateLength minimum="3" />
                            </h:inputText>
                            <p:message for="id-firstname" />
                        </h:panelGroup>

                        <h:outputLabel value="#{msg['RegistrationPage.inputFields.lastname']}" />
                        <h:panelGroup>
                            <h:inputText id="id-lastname" value="#{registrationManager.newUser.lastname}" maxlength="45" required="true"
                                         requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                         validatorMessage="#{msg['userManagement.inputFields.validationMessages.name.length']}">
                                <f:validateLength minimum="3" />
                            </h:inputText>
                            <p:message for="id-lastname" />
                        </h:panelGroup>

                        <h:outputLabel value="#{msg['RegistrationPage.inputFields.username']}" />
                        <h:panelGroup>
                            <h:inputText id="id-username" value="#{registrationManager.newUser.username}" maxlength="30" required="true"
                                         requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                         validator="#{registrationManager.validateUsername}">
                            </h:inputText>
                            <p:message for="id-username" />
                        </h:panelGroup>

                        <h:outputLabel value="#{msg['RegistrationPage.inputFields.password']}" />
                        <h:panelGroup>
                            <h:inputSecret id="id-password" value="#{registrationManager.newUser.password}" maxlength="16" required="true" styleClass="password"
                                           requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                           validatorMessage="#{msg['userManagement.inputFields.validationMessages.password.format']}">
                                <f:validateLength minimum="8" />
                                <f:validateRegex pattern="[a-zA-Z_0-9-.]+" />
                            </h:inputSecret>
                            <p:message for="id-password" />
                        </h:panelGroup>

                        <h:outputLabel value="#{msg['RegistrationPage.inputFields.passwordConfirmation']}" />
                        <h:panelGroup>
                            <h:inputSecret id="id-conf-password" maxlength="16" required="true" styleClass="passwordConf"
                                           requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                           validator="#{registrationManager.validatePassword}">
                            </h:inputSecret>
                            <p:message for="id-conf-password" />
                        </h:panelGroup>

                        <h:outputLabel value="#{msg['RegistrationPage.inputFields.sex']}" />
                        <h:panelGroup>
                            <h:selectOneMenu id="id-sex" value="#{registrationManager.newUser.sex}" required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}">
                                <f:selectItem itemLabel="#{msg['RegistrationPage.inputFields.sex.male']}" itemValue="false" />
                                <f:selectItem itemLabel="#{msg['RegistrationPage.inputFields.sex.female']}" itemValue="true" />
                            </h:selectOneMenu>
                            <p:message for="id-sex" />
                        </h:panelGroup>

                        <h:outputLabel value="#{msg['RegistrationPage.inputFields.age']}" />
                        <h:panelGroup>
                            <h:inputText id="id-age" value="#{registrationManager.newUser.age}" maxlength="2" required="true"
                                         requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                                         validatorMessage="#{msg['userManagement.inputFields.validationMessages.age']}"
                                         converterMessage="#{msg['userManagement.inputFields.validationMessages.age']}">
                                <f:convertNumber integerOnly="true" />
                                <f:validateLongRange minimum="18" maximum="99" />
                            </h:inputText>
                            <p:message for="id-age" />
                        </h:panelGroup>

                        <h:outputLabel value="#{msg['RegistrationPage.inputFields.email']}" />
                        <h:panelGroup>
                            <h:inputText id="id-email" value="#{registrationManager.newUser.email}" maxlength="200" required="true"
                                         validatorMessage="#{msg['userManagement.inputFields.validationMessages.email']}" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}">
                                <f:validateRegex pattern=".+@.+\.[a-z]+" />
                            </h:inputText>
                            <p:message for="id-email" />
                        </h:panelGroup>
                    </h:panelGrid>
                </div>

                <script type="text/javascript">
                    $(document).ready(function(){
                        $("td.inputColumn span.rf-msg-err").parent().parent().find("input").css("border","1px solid red");
                    });
                </script>
                <div class="action-buttons">
                    <a href="#{facesContext.externalContext.requestContextPath}/login.xhtml">#{msg['RegistrationPage.buttons.backToLoginPage']}</a>
                    <h:commandButton value="#{msg['RegistrationPage.buttons.registrate']}" action="#{registrationManager.signUpUser}" />
                    <h:commandButton value="#{msg['Common.reset']}" type="reset" >
                        <f:ajax render="@form" />
                    </h:commandButton>
                </div>
                <div class="registrationSuccessful" style='display: #{registrationManager.success ? "block" : "none"}'>
                    <div class="infoPanel">
                        <div class="title">
                            <h:graphicImage library="images" name="success-48.png" />
                            <h:outputFormat value="#{msg['RegistrationPage.successPanel.title']}">
                                <f:param value="#{registrationManager.newUser.firstname} #{registrationManager.newUser.lastname}" />
                            </h:outputFormat>
                        </div>
                        <div class="content">
                            <h:outputText escape="false" value="#{msg['RegistrationPage.successPanel.text']}" />
                        </div>
                        <div class="button">
                            <h:commandButton value="#{msg['Common.ok']}" action="login.xhtml?faces-redirect=true" immediate="true" />
                        </div>
                    </div>
                    <div class="shadow" />
                </div>
            </h:form>
        </div>
	</ui:define>
</ui:composition>